<template>
  <view class="hot-content">
    <view class="moreImage" v-for="(item,i) in Picture" :key="i" @click="transmit(item)">
      <image class="image" lazy-load :src="item.imgname" mode="aspectFill" v-if="item.pic=='gif'"></image>
     <image class="imagea" lazy-load :src="item.imgname" mode="aspectFit" v-else></image>
    </view>
  </view>
</template>

<script>
  export default {
    props: {
      Picture: {
        type: Array,
        defaul: []
      },
      // 默认左边间距
      // padingLeft: {
      //   type: String,
      //   default: '30'
      // },
      // // 默认右边间距
      // padingRight: {
      //   type: String,
      //   default: '30'
      // }
    },
    data() {
      return {
      
      };
    },

    onLoad() {
    },
    methods: {
      // 把图片索引传出去
      transmit(i) {
        console.log(i)
        this.$emit("isId", {
          index: i
        })
      }
    }


  }
</script>

<style lang="scss">
  // 动态图片
  .hot-content {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding-bottom: 70rpx;
  }
  
  .moreImage {
    margin-top: 20rpx;
    width: 210rpx;
    height: 210rpx;

    .image {
      width: 210rpx;
      border: 1px solid #eee;
      border-radius: 16rpx;
    }
    .imagea{
      width: 210rpx;
      height: 210rpx;
      border: 1px solid #eee;
      border-radius: 16rpx;
    }
  }
</style>
